{% extends "tj3/base.html" %}

{% block navigation %}

<script type="text/javascript">
	var table;
	var json_table = new google.visualization.DataTable({{json_table|safe}}, 0.6);
	var task_id;
	
	function drawTable() {
		table = new google.visualization.Table(document.getElementById('table_div'));
		// Every time the table fires the "select" event, it should call your
		// selectHandler() function.
		google.visualization.events.addListener(table, 'select', selectHandler);
		table.draw(json_table, 
			{showRowNumber: false, 
			page:"enable", 
			allowHtml:true, 
			sort:'disable', // Must be disabled since we are reserving the hierarchy 
			pageSize:20,
			width:400,
		});
	}

	function selectHandler(e){
		var selection = table.getSelection();
		var str;
	
		for (var i=0; i < selection.length; i++) {
			var item=selection[i];
			if (item.row!=null && item.column!=null) { // select a cell
				str = json_table.getValue(item.row,item.column);
	
			}else if (item.row != null) { // select a row
				str = json_table.getValue(item.row,0);
	
			}else if (item.column != null) { // select a column
				str = json_table.getValue(0,item.column);
			}
		}
		//alert(window.location.href);
	
		// getValue(0,0) should be the task_id
		task_id=json_table.getValue(item.row,0);
		$('#task_detail_link').attr('href','/tj3/task/detail/'+task_id+'/');
		$('#resource_allocation_link').attr('href','/tj3/resource/allocate/'+task_id+'/');
		
		$.post("{% url task_edit %}",
			{'id': task_id},
			function(resp_data){
				
				// Read task info
				var task = $.parseJSON(resp_data['task']);
				$('#task_id').val(task_id);
				$('#task_name').val(task[0]['fields']['name']);
				$('#task_parent').val(task[0]['fields']['parent']);
				$('textarea[name=task_description]').val(task[0]['fields']['description']);
				
				// Read period info
				var period=$.parseJSON(resp_data['period']);
				if (period.length>0){
					$('#start').val(period[0]['fields']['start']);
					$('#end').val(period[0]['fields']['end']);
					$('#duration').val(period[0]['fields']['duration']);
					$('#length').val(period[0]['fields']['length']);
					$('#effort').val(period[0]['fields']['effort']);
					$('#max_start').val(period[0]['fields']['max_start']);
					$('#min_start').val(period[0]['fields']['min_start']);
					$('#max_end').val(period[0]['fields']['max_end']);
					$('#min_end').val(period[0]['fields']['min_end']);
				}
				else{
				
					$('#start').val('');
					$('#end').val('');
					$('#duration').val('');
					$('#length').val('');
					$('#effort').val('');
					$('#max_start').val('');
					$('#min_start').val('');
					$('#max_end').val('');
					$('#min_end').val('');
				
				}
				
				$('#start').datepicker({ dateFormat: 'yy-mm-dd' });
				$('#end').datepicker({ dateFormat: 'yy-mm-dd' });
				$('#max_start').datepicker({ dateFormat: 'yy-mm-dd' });
				$('#min_start').datepicker({ dateFormat: 'yy-mm-dd' });
				$('#max_end').datepicker({ dateFormat: 'yy-mm-dd' });
				$('#min_end').datepicker({ dateFormat: 'yy-mm-dd' });
				
				// Read dependency
				var deps=resp_data['deps'];
				var dd=[];
				for (var key in deps) {
					dd.push(deps[key]);
				}
				$('#deps').val(dd.join(','));
								
				// Show task record div
				$('#task_info').show();
				
			}
		);// end of post
	}   
	
	$('document').ready(function(){
		$('#mymodal').hide();
		$('#import_mpp').hide();
		$('#import_mpp_btn').button();
				
		drawTable();
		$('#task_info').hide();
		$('#advanced_option').hide();
		$('#show_advanced_option').click(function(){
			$('#advanced_option').toggle();
		});		
	
		$('#update_btn').click(function(){
			$('form').get(0).setAttribute('action', '{% url task_update 0 %}');
		}).button();
		
		$('#clone_btn').click(function(){
			$('form').get(0).setAttribute('action', '{% url task_update 1 %}');
		}).button();
		
		$('#delete_btn').click(function(){
			$('form').get(0).setAttribute('action', '/tj3/task/delete/' + task_id+'/');
		}).button();

		$('#split_btn').click(function(){
			$('form').get(0).setAttribute('action', '/tj3/task/split/' + task_id+'/');
		}).button();

		$('#create_task').click(function(){
			$("#mymodal").modal({
				opacity:80,
				overlayCss: {backgroundColor:"#fff"}
			});
		});
		$('#import_mpp_link').click(function(){
			$("#import_mpp").modal({
				opacity:80,
				overlayCss: {backgroundColor:"#fff"}
			});
		});
		
		$('#create_btn').click(function(){
			var proj_id;
			var name;
			var description;
			
			proj_id=$('#project').text();
			name=$('#name').val();
			description=$('textarea[name=description]').val();
			
			// Post the new event to the server!
			var json_event=$.toJSON({'proj_id':proj_id, 'name':name, 'description':description});
			$.post("{% url task_create %}",
			{'data':json_event},
			function (data){
				//alert(data);
				new_url = ['/tj3/project/main/plan',{{project.id}}].join('/'); 
				window.location.replace(new_url);
			});             
		});
		
		$('#import_mpp_btn').click(function(){
		
		});
	});
	
</script>
{% endblock navigation %}

{% block content %}
<h1 class="ui-widget ui-widget-header">{{project.name}}<span class="float_right">Scenario: {{project.scenario.name|capfirst}}</span></h1>

	<b>Project Time Frame</b>: {{project.start}} &mdash; {{project.end}}
	<table>
	<tr>
	<td width="35%">
		<div id="table_div" class="ui-widget ui-widget-content">
		</div>
		<br />
		<div id="create_task" class="float_right fancy">
			<span class="float_right ui-icon ui-icon-plusthick"></span>
			Create New Tasks
		</div>
		<br />
		
	<td width="65%">
		<!--- Input form, will only show after user selects a task in the table --->	
		<div id="task_info" class="mycontent">
			<form id="update_form" action="" method="post" enctype="multipart/form-data">
			{% csrf_token %}
				<div>
					<span class="ui-icon ui-icon-extlink" style="float: left; margin-right: .3em;"></span>
					<a id="task_detail_link" href="">Shortcut to task details...</a>
					
					<input id="task_id" type="hidden" name="task_id" value="" READONLY />
					<table>
						<!--- task name --->
						<tr><td>Name:<td>
							<input id="task_name" type="text" name="task_name" value="" />
						<tr><td>Description:<td>
							<textarea name="task_description" rows="5" cols="20"></textarea>						
						<tr><td>Hierarchy:<td>
							<input id="task_parent" type="text" name="task_parent" value="">
							<br />
							<a href="{% url task_hierarchy project.id %}" id="task_display_link">
								<span class="ui-icon ui-icon-extlink" style="float: left; margin-right: .3em;"></span>
								Use the tree mode...
							</a>
						
						<!--- period --->				
						<tr><td>Start:<td>
							<input id="start" type="text" name="start" value="">
						<tr><td>End:<td>
							<input id="end" type="text" name="end" value="">
						<tr><td>Dependency:<td>
							<input id="deps" type="text" name="deps" value="">
						
						<tr><td>Duration:<td>
							<input id="duration" type="text" name="duration" value="">
						<tr><td>Length:<td>
							<input id="length" type="text" name="length" value="">
						<tr><td>Effort:<td>
							<input id="effort" type="text" name="effort" value="">
							<br />
							<a id="resource_allocation_link" href="">
							<span class="ui-icon ui-icon-extlink" style="float: left; margin-right: .3em;"></span>
							To assign resources...
							</a>
					</table>
					<a href='#' id='show_advanced_option' class="fancy">Advanced options...</a>
					<div id='advanced_option' stype="display:none;">
					<table>				
						<tr><td>Max Start:<td>
							<input id="max_start" type="text" name="max_start" value="">
						<tr><td>Min Start:<td>
							<input id="min_start" type="text" name="min_start" value="">
						<tr><td>Max End:<td>
							<input id="max_end" type="text" name="max_end" value="">
						<tr><td>Min End:<td>
							<input id="min_end" type="text" name="min_end" value="">							
					</table>
					</div>
				</div>
				
				<input id="update_btn" type="submit" value="Update" /> 
				<input id="clone_btn" type="submit" value="Clone" /> 
				<input id="split_btn" type="submit" value="Split" /> 
				<input id="delete_btn" type="submit" value="Delete" /> 
			</form>
		</div>
	
	</table>		



<div id="mymodal" style="color:white;">
	<span id="project" hidden>{{project.id}}</span>
	<label>Name</label><br />
		<input id="name" type="text" value="" /><br />
	<label>Description</label><br />
		<textarea name="description" rows="5" cols="20"></textarea><br />
	
	<div class="float_right">
		<input type="button" id="create_btn" value="Create" class="simplemodal-close" />
		<input type="button" id="cancel_btn" value="Cancel" class="simplemodal-close" />
	</div>
</div>


{% endblock content %}
